<template>
  <el-container>
    <el-menu
        :collapse="isCollapse"
        :default-active="current_menu_item"
        @select="handleSelect"
        :collapse-transition="false"
    >
      <h4 style="line-height: 60px;text-align: center;color: #333;">
        {{ isCollapse ? '智阅' : '智阅图书系统' }}
      </h4>
      <el-menu-item v-for="item in noChildren" :index="item.keypath">
        <component :is="item.icon"></component>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu v-for="item in hasChildren" :index="item.keypath">
        <template #title>
          <component :is="item.icon"></component>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group :title="item.name">
          <el-menu-item v-for="i in item.children" :index="i.keypath">
            <component :is="i.icon"></component>
            {{ i.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
    <el-container>
      <el-header>
        <el-row justify="space-between" align="middle"
                style="height: 50px;padding: 0 20px;box-shadow: #eee 1px 1px 4px;">
          <el-row align="middle">
            <el-button text link @click="handleCollapse">
              <el-icon v-if="isCollapse" style="transform: scale(2.6);margin-left: 8px;">
                <Expand/>
              </el-icon>
              <el-icon v-else style="transform: scale(2.6);margin-left: 8px;">
                <Fold/>
              </el-icon>
            </el-button>
            <el-breadcrumb :separator-icon="ArrowRightBold" style="margin-left: 10px;">
              <el-breadcrumb-item @click="handleBread" :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="current_menu_name!==''">{{ current_menu_name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-row>

          <el-row align="middle">
            <!--<screen-full/>-->
            <div style="display: flex;flex-direction: column;justify-content: space-around">
              <div>{{ user.name }}</div>
              <div style="color: #0753a2;font-size: 12px;transform: translateY(3px);">{{ role.name }}</div>
            </div>
            <el-dropdown style="cursor: pointer;">
              <div>
                <img class="avatar" v-if="user.sex==='女'" src="@/assets/avatar-female.png" alt=" ">
                <img class="avatar" v-if="user.sex==='男'" src="@/assets/avatar-male.png" alt=" ">
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="MineVisible=true">修改信息</el-dropdown-item>
                  <el-dropdown-item @click="PassVisible=true">修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-row>
        </el-row>

        <el-row justify="start" align="middle"
                style="border-bottom: 1px solid #ccc;height: 30px;padding: 0 20px;box-shadow:#ccc 2px 2px 5px;">
          <el-tag
              v-for="item in tags"
              :key="item.name"
              :closable="item.keypath!=='0'"
              :type="item.keypath===current_menu_item?'primary':'info'"
              @close="handleClose(item)"
              @click="handleTags(item.keypath)"
              :effect="item.keypath===current_menu_item?'dark':'light'"
              :class="item.keypath===current_menu_item?'dark':'light'"
              style="margin-right: 5px;cursor: pointer;border-radius: 0;height: 24px;"
          >
            {{ item.name }}
          </el-tag>
        </el-row>
      </el-header>
      <el-main>
        <div style="width: 100%;height: calc(100vh - 120px);overflow:scroll;">
          <component :is="current_comp"></component>
        </div>
      </el-main>
    </el-container>
  </el-container>
  <!--   修改我的信息   -->
  <dialog-mine v-model:visible="MineVisible"/>
  <!--   修改密码   -->
  <dialog-pass v-model:visible="PassVisible"/>
</template>

<script setup lang="ts">
import {ArrowRightBold, Expand, Fold} from '@element-plus/icons-vue'
import {computed, onMounted, reactive, ref, shallowRef} from "vue";
import router from "@/router";
import DialogPass from "@/components/dialog/DialogPass.vue";
import DialogMine from "@/components/dialog/DialogMine.vue";
import Home from "@/views/pages/Home.vue";
import Menu from "@/views/pages/Menu.vue";
import User from "@/views/pages/User.vue";
import Role from "@/views/pages/Role.vue";
import Sort from "@/views/pages/Sort.vue";
import Books from "@/views/pages/Books.vue";
import Book from "@/views/pages/Bookno.vue";
import Borrow from "@/views/pages/Borrow.vue";
import Serve from "@/views/pages/Serve.vue";
import Mine from "@/views/pages/Mine.vue";
import ScreenFull from "@/components/ScreenFull.vue"

const subComponents = reactive({
  '0': shallowRef(Home),
  '1': shallowRef(Menu),
  '2': shallowRef(User),
  '3': shallowRef(Role),
  '4': shallowRef(Sort),
  '5': shallowRef(Books),
  '6': shallowRef(Book),
  '7': shallowRef(Borrow),
  '8': shallowRef(Serve),
  '9': shallowRef(Mine),
});
// 修改我的信息
const MineVisible = ref(false);
// 修改密码
const PassVisible = ref(false)
const isCollapse = ref(false);
const current_menu_name = ref('');
const current_menu_item = ref('0');
const current_comp = shallowRef(Home);
const user = ref({});
const role = ref({});
const menu = ref([]);
const tags = ref([{name: '首页', keypath: '0'}]);

onMounted(() => {
  if (localStorage.getItem("name")) current_menu_name.value = JSON.parse(localStorage.getItem("name"));
  if (localStorage.getItem("tags")) tags.value = JSON.parse(localStorage.getItem("tags"));
  user.value = JSON.parse(localStorage.getItem("user"));
  role.value = JSON.parse(localStorage.getItem("role"));
  menu.value = JSON.parse(localStorage.getItem("menu"));
  current_menu_item.value = localStorage.getItem("keypath");
  current_comp.value = subComponents[localStorage.getItem("keypath")];
})

const noChildren = computed(() =>
    menu.value.filter((item: any) => !item.children)
);
const hasChildren = computed(() =>
    menu.value.filter((item: any) => item.children)
);

const handleSelect = (key, keypath) => {
  toKey(key);
  if (tags.value.find((item: any) => item.keypath === key) == undefined && key !== '0') {
    let tag = {name: '', keypath: ''};
    for (let i = 0; i < menu.value.length; i++) {
      let element = menu.value[i];
      if (element.keypath == key) {
        tag = element;
      }
    }
    tags.value.push({name: tag.name, keypath: tag.keypath});
  }
  if (key === '0') {
    current_menu_name.value = '';
  }
  localStorage.setItem("tags", JSON.stringify(tags.value));
  localStorage.setItem("name", JSON.stringify(current_menu_name.value));
}

const handleClose = (tag: any) => {
  tags.value.splice(tags.value.indexOf(tag), 1);
  localStorage.setItem("tags", JSON.stringify(tags.value));
  if (tag.keypath === current_menu_item.value) {
    toHome();
    localStorage.setItem("name", JSON.stringify(current_menu_name.value));
  }
}

function handleTags(key) {
  toKey(key);
  if (key === '0') {
    current_menu_name.value = '';
  }
  localStorage.setItem("name", JSON.stringify(current_menu_name.value));
}

function handleCollapse() {
  isCollapse.value = !isCollapse.value;
}

function handleBread() {
  toHome();
  localStorage.setItem("name", JSON.stringify(current_menu_name.value));
}

function toHome() {
  current_menu_name.value = '';
  current_menu_item.value = '0';
  current_comp.value = subComponents['0'];
  localStorage.setItem("keypath", '0');
}

function toKey(key: any) {
  for (let i = 0; i < menu.value.length; i++) {
    let element = menu.value[i];
    if (element.keypath == key) {
      current_menu_name.value = element.name;
    }
  }
  current_menu_item.value = key;
  current_comp.value = subComponents[key];
  localStorage.setItem("keypath", key);
}

function loginOut() {
  localStorage.clear();
  router.push('/');
}
</script>

<style scoped>
.avatar {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

.el-menu {
  height: calc(100vh) !important;
  overflow: scroll;
  border-right: 1px solid #ccc;
  box-shadow: #ccc 2px 2px 6px;
}

.el-header {
  border-bottom: 1px solid #ccc;
  height: 80px;
  padding: 0;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 5px !important;
}

.light {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #6C7486;
}
</style>